<template>
<view class="setting-box h100 bg-white text-black">
  <view class="cu-list menu">
    <view class="user-avatar cu-item arrow padding-tb" @tap="changeAvatar">
      <view class="content">头像</view>
      <view class="action">
        <view class="cu-avatar round lg bg-gray dm-avatar" :style="{backgroundImage: `url(${userAvatar})`}"></view>
      </view>
    </view>
    <view class="cu-item">
      <view class="content">手机</view>
      <view class="action">{{userInfo.mobile}}</view>
    </view>
    <view class="cu-item arrow" @tap="gotoPage('nickname')">
      <view class="content">昵称</view>
      <view class="action">{{userInfo.nickname}}</view>
    </view>
    <view class="cu-item arrow" @tap="gotoPage('profession')">
      <view class="content">职业</view>
      <view class="action">{{userInfo.profession || '未知'}}</view>
    </view>
    <view class="cu-item arrow" @tap="gotoPage('gender')">
      <view class="content">性别</view>
      <view class="action">{{genderLabel}}</view>
    </view>
    <view class="cu-item arrow border-bottom" @tap="gotoPage('security')">
      <view class="content">账号与安全</view>
      <view class="action">******</view>
    </view>
  </view>

  <view class="flex flex-direction margin-tb padding">
    <button class="cu-btn dm-btn round bg-orange text-xl" @tap="logout">退出登录</button>
  </view>

  <view class="cu-modal" :class="ifShowModal?'show':''">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end">
        <view class="content">确定要退出登录吗?</view>
        <view class="action" @tap="hideModal">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="cu-bar bg-white">
        <view class="action margin-0 flex-sub text-orange solid-left" @tap="hideModal">取消</view>
        <view class="action margin-0 flex-sub solid-left" @tap="confirmLogout">确定</view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
// TODO 点击头像选择拍照或从相册选择
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'profile', // 个人设置
  data () {
    return {
      ifShowModal: false,
      curAvatarSrc: ''
    }
  },
  computed: {
    ...mapState([
      'GENDER_LIST'
    ]),
    ...mapGetters([
      'userInfo'
    ]),
    userAvatar() {
      return this.userInfo.avatar || '/static/user-avatar.png'
    },
    genderLabel() {
      return this.GENDER_LIST[this.userInfo.gender]
    }
  },
  methods: {
    changeAvatar() {
      console.log('点击头像')
      // uni.showActionSheet({
      //   itemList: ['拍照', '从相册中选择'],
      //   success: async res => {
      //     console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
      //     if (res.tapIndex === 0) { // 拍照
      //       this.curAvatarSrc = await this.$store.dispatch('captureImage')
      //     } else if (res.tapIndex === 1) { // 从相册中选择
      //       this.curAvatarSrc = await this.$store.dispatch('chooseImageFromAlbum')
      //     }
      //     console.log('Src:', this.curAvatarSrc)
      //   },
      //   fail: function (res) {
      //       console.log(res.errMsg);
      //   }
      // })
    },
    /** 修改用户个人信息 */
    editUserProfile() {
      this.$api.editUserProfile(this.profileParams).then(async res => {
        if (!res) return
        const resData = res.data
        const userinfo = resData.userinfo
        this.$store.commit('SET_USER_INFO', userinfo)
        await this.$showSuccessToast('修改成功!')
      })
    },
    logout() {
      console.log('退出登录')
      this.showModal()
    },
    confirmLogout() {
      console.log('确认退出')
      this.hideModal()
      this.$store.dispatch('handleLogout')
      this.$Router.pushTab({ name: 'home' })
    },
    gotoPage(key) {
      const routeName = key === 'security' ? 'security' : 'profile-edit'
      this.$Router.push({
        name: routeName,
        params: {key}
      })
    },
    showModal() {
      this.ifShowModal = true
    },
    hideModal() {
      this.ifShowModal = false
    }
  }
}
</script>

<style lang="less">
.dm-avatar {
  margin: 30rpx 0;
}
</style>
